<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style>
    .bg-f2 {
      background-color: #f8f9fa;
    }

    video {
      width: 320px;
      height: auto;
    }

    .videoRow {
      margin-top: 30px;
    }

    #previewLabel {
      display: block;
      position: absolute;
    }
  </style>
  <title class="base">推拉流基础功能</title>
<link href="../index.20849460.css" rel="stylesheet"></head>

<body class="bg-f2">
  <div class="container">

    <div class="my-3 p-3 bg-white rounded box-shadow small">

      <h6 class="border-bottom border-gray pb-2 mb-0 base">基础推拉流</h6>

      <div class="row" style="margin-top:1%">

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="audioList"><strong
                  class="text-gray-dark audioDevices">音频设备</strong></label>
            </div>
            <select class="custom-select" id="audioList" style="width: 50%">
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="videoList"><strong
                  class="text-gray-dark videoDevices">视频设备</strong></label>
            </div>
            <select class="custom-select" id="videoList" style="width: 50%">
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="playMode"><strong
                  class="text-gray-dark playMode">拉流模式</strong></label>
            </div>
            <select class="custom-select" id="playMode" style="width: 50%">
              <option value="auto" class="auto">默认</option>
              <option value="all" class="all">拉音视频</option>
              <option value="video" class="onlyVideo">只拉视频</option>
              <option value="audio" class="onlyAudio">只拉音频</option>
            </select>
          </div>
        </div>
        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="videoQuality"><strong
                  class="text-gray-dark videoQuality">推流质量</strong></label>
            </div>
            <select class="custom-select" id="videoQuality" style="width: 50%">
              <option value="1" selected>标清</option>
              <option value="2">高清</option>
              <option value="3">超清</option>
              <option value="4">自定义</option>
            </select>
          </div>
        </div>
        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="channelCount"><strong
                  class="text-gray-dark channelCount">声道</strong></label>
            </div>
            <select class="custom-select" id="channelCount" style="width: 50%">
              <option value="1" class="channel1">默认</option>
              <option value="2" class="channel2">双声道</option>
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="videoCodec"><strong
                  class="text-gray-dark videoCodeType">视频编码</strong></label>
            </div>
            <select class="custom-select" id="videoCodec" style="width: 60%">
              <option value="">auto</option>
              <option value="H264">H264</option>
              <option value="VP8">VP8</option>
            </select>
          </div>
        </div>

        <!-- <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="playMode"><strong class="text-gray-dark repeat">重复推拉流</strong></label>
            </div>
          </div>
        </div> -->

      </div>

      <div class="row">
        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="roomId"><strong class="text-gray-dark roomid">房间号</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="roomId" style="width: 75%; max-width: 200px"
              aria-describedby="emailHelp" placeholder="please enter room ID">
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="extraInfo"><strong
                  class="text-gray-dark extrainfo">流附加信息</strong></label>
            </div>
            <input type="input" class="form-control d-inline" id="extraInfoInput" style="width: 75%; max-width: 200px"
              aria-describedby="emailHelp" placeholder="please stream extraInfo">
          </div>
        </div>

        <!-- <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="tcpOnly"><strong class="text-gray-dark">推拉流策略</strong></label>
            </div>
            <select class="custom-select" id="tcpOnly" style="width: 50%">
              <option value="0">auto</option>
              <option value="1">只走tcp</option>
              <option value="2">只走udp</option>
            </select>
          </div>
        </div> -->
      </div>

      <div class="row" style="margin-top:1%">

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="noiseSuppression"><strong class="text-gray-dark">减噪</strong></label>
            </div>
            <select class="custom-select" id="noiseSuppression" style="width: 50%">
              <option value="1">开</option>
              <option value="0">关</option>
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="autoGainControl"><strong class="text-gray-dark">自动增益</strong></label>
            </div>
            <select class="custom-select" id="autoGainControl" style="width: 50%">
              <option value="1">开</option>
              <option value="0">关</option>
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="echoCancellation"><strong
                  class="text-gray-dark">回声消除</strong></label>
            </div>
            <select class="custom-select" id="echoCancellation" style="width: 50%">
              <option value="1">开</option>
              <option value="0">关</option>
            </select>
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="audioBitRate"><strong class="text-gray-dark">音频码率</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="audioBitrate" aria-describedby="emailHelp"
              placeholder="音频码率" value="">
          </div>
        </div>

      </div>

      <div class="row">
        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="width"><strong class="text-gray-dark">宽</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="width" aria-describedby="emailHelp" placeholder=""
              value="">
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="height"><strong class="text-gray-dark">高</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="height" aria-describedby="emailHelp" placeholder=""
              value="">
          </div>
        </div>

        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="frameRate"><strong class="text-gray-dark">帧率</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="frameRate" aria-describedby="emailHelp" placeholder=""
              value="">
          </div>
        </div>
        <div class="col-sm">
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <label class="input-group-text" for="bitrate"><strong class="text-gray-dark">码率</strong></label>
            </div>
            <input type="email" class="form-control d-inline" id="bitrate" aria-describedby="emailHelp" placeholder=""
              value="">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm">
          <button type="button" id="createRoom" class="btn btn-primary btn-sm enterRoomPush">进入房间（推流）</button>
          <button type="button" id="enterRoom" class="btn btn-primary btn-sm">进房预览</button>
          <button type="button" id="publish" class="btn btn-primary btn-sm">推流</button>
          <button type="button" id="openRoom" class="btn btn-primary btn-sm enterRoomPlay">进入房间（不推流）</button>
          <button type="button" id="useVideo" class="btn btn-secondary btn-sm">更改视频输入设备</button>
          <button type="button" id="useAudio" class="btn btn-secondary btn-sm">更改音频输入设备</button>
          <button type="button" id="toggleCamera" class="btn btn-primary btn-sm enableCamera">启用/关闭摄像头</button>
          <button type="button" id="toggleSpeaker" class="btn btn-primary btn-sm enableMicrophone">启用/关闭麦克风</button>
          <!-- <button type="button" id="mutePlayStreamVideo" class="btn btn-primary btn-sm">停止/恢复拉视频流</button> -->
          <!-- <button type="button" id="mutePlayStreamAudio" class="btn btn-primary btn-sm">停止/恢复拉音频流</button> -->
          <button type="button" id="stopPlaySound" class="btn btn-primary btn-sm unenableSound">停止获取音浪</button>
          <button type="button" id="resumePlaySound" class="btn btn-primary btn-sm resumeSound">恢复获取音浪</button>
          <button type="button" id="extraInfo" class="btn btn-primary btn-sm">修改流附加信息</button>
          <button type="button" id="switchConstraints" class="btn btn-primary btn-sm">改变推流视频参数</button>
          <button type="button" id="setAudioConfig" class="btn btn-primary btn-sm">改变推流3A</button>
          <!-- <button type="button" id="playVideo" class="btn btn-primary btn-sm">播放视频</button> -->
          <button type="button" id="leaveRoom" class="btn btn-secondary btn-sm leaveRoom">退出</button>
        </div>
      </div>

      <div class="row videoRow">
        <div class="col-sm">
          <h5 class="sound d-none"><span class="soundText">当前音量：</span> <span id="soundLevel">0</span></h5>
          <label id="previewLabel" class="text-white"></label>
          <video id="previewVideo" autoplay muted playsinline></video>
        </div>
        <div class="col-sm remoteVideo">
          <!-- <video  autoplay muted playsinline></video> -->
        </div>
      </div>
    </div>

  </div>


<script type="text/javascript" src="../base/base.bundle.js"></script></body>

</html>